<template>
  <div class="app-container">
    <!-- 头部导航栏 -->
    <header class="header">
      <div class="header-left">
        <span class="company-name">公司名称</span>
        <nav class="nav-menu">
          <span class="nav-item">集团管理</span>
          <span class="nav-item active">企业管理</span>
          <span class="nav-item">平台运营</span>
          <span class="nav-item">系统设置</span>
        </nav>
      </div>
      <div class="header-right">
        <input type="text" class="search-input" placeholder="搜索" />
        <span class="user-info">姓名</span>
        <span class="header-item">应用市场</span>
        <span class="header-item">客户端</span>
      </div>
    </header>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧菜单 -->
      <aside class="sidebar">
        <div class="sidebar-header">
          <span class="sidebar-title">企业管理 2021.07</span>
          <span class="sidebar-toggle">≡</span>
        </div>
        <div class="sidebar-menu">
          <div class="menu-item expandable">
            <span class="menu-title active">溯源管理</span>
          </div>
        </div>
      </aside>

      <!-- 右侧内容 -->
      <main class="content">
        <div class="content-header">
          <div class="content-tabs">
            <div class="tab-item active">溯源管理</div>
            <button class="tab-close">×</button>
          </div>
        </div>

        <!-- 操作按钮区域 -->
        <div class="action-buttons">
          <button class="btn primary">新增</button>
          <button class="btn danger">删除</button>
        </div>

        <!-- 表格区域 -->
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th><input type="checkbox" /></th>
                <th>序号</th>
                <th>商品名称</th>
                <th>生产批次</th>
                <th>保质期(天)</th>
                <th>生产许可证号</th>
                <th>生产企业</th>
                <th>信息完善度</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in tableData" :key="item.id">
                <td><input type="checkbox" /></td>
                <td>{{ item.id }}</td>
                <td>{{ item.productName }}</td>
                <td>{{ item.batch }}</td>
                <td>{{ item.shelfLife }}</td>
                <td>{{ item.license }}</td>
                <td>{{ item.company }}</td>
                <td :class="item.completeness === '100%' ? 'completeness-high' : 'completeness-low'">
                  {{ item.completeness }}
                </td>
                <td class="operation-buttons">
                  <span class="btn-text">详情修改</span>
                  <span class="btn-text">导出溯源</span>
                  <span class="btn-text danger">删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页控件 -->
        <div class="pagination">
          <div class="page-size">
            <span>每页显示：</span>
            <select>
              <option value="10">10</option>
              <option value="15">15</option>
              <option value="30">30</option>
              <option value="50">50</option>
              <option value="100">100</option>
            </select>
          </div>
          <div class="page-info">
            <span>共100条</span>
          </div>
          <div class="page-controls">
            <button class="btn-page">‹</button>
            <button class="btn-page active">1</button>
            <button class="btn-page">2</button>
            <button class="btn-page">3</button>
            <button class="btn-page">4</button>
            <button class="btn-page">5</button>
            <button class="btn-page">›</button>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 溯源管理页面组件
import { ref } from 'vue';

// 表格数据
const tableData = ref([
  { id: 1, productName: '兔腿(小)', batch: '20210718', shelfLife: 12, license: 'SC2112027680', company: '成都兔发食品加工工程有限公司', completeness: '100%' },
  { id: 2, productName: '兔腿(大)', batch: '20210718', shelfLife: 12, license: 'SC21120547680', company: '成都兔发食品加工工程有限公司', completeness: '80%' },
  { id: 3, productName: '兔肉粒', batch: '20210718', shelfLife: 12, license: 'SC21120547680', company: '成都兔发食品加工工程有限公司', completeness: '100%' },
  { id: 4, productName: '兔肉丁', batch: '20210718', shelfLife: 12, license: 'SC21120547680', company: '成都兔发食品加工工程有限公司', completeness: '80%' },
  { id: 5, productName: '冷吃兔', batch: '20210718', shelfLife: 12, license: 'SC21120547680', company: '成都兔发食品加工工程有限公司', completeness: '100%' },
  { id: 6, productName: '兔头(麻辣)', batch: '20210718', shelfLife: 12, license: 'SC21120547680', company: '成都兔发食品加工工程有限公司', completeness: '100%' },
  { id: 7, productName: '兔头(原味)', batch: '20210718', shelfLife: 12, license: 'SC21120547680', company: '成都兔发食品加工工程有限公司', completeness: '100%' },
  { id: 8, productName: '兔肉丁', batch: '20210718', shelfLife: 12, license: 'SC21120547680', company: '成都兔发食品加工工程有限公司', completeness: '100%' },
  { id: 9, productName: '兔肉丁', batch: '20210718', shelfLife: 12, license: 'SC21120547680', company: '成都兔发食品加工工程有限公司', completeness: '100%' },
  { id: 10, productName: '兔肉丁', batch: '20210718', shelfLife: 12, license: 'SC21120547680', company: '成都兔发食品加工工程有限公司', completeness: '100%' }
]);

console.log('溯源管理页面加载');
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 头部样式 */
.header {
  height: 50px;
  background-color: #001529;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.company-name {
  font-size: 18px;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  gap: 20px;
}

.nav-item {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
  background-color: #1890ff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-input {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.user-info {
  color: white;
}

.header-item {
  color: white;
  cursor: pointer;
}

/* 主内容区域 - 修复左侧空白问题 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  width: 100%; /* 确保主内容区域占据100%宽度 */
}

/* 左侧菜单 - 调整宽度并移除可能的额外空间 */
.sidebar {
  width: 180px; /* 调整为更合理的宽度 */
  min-width: 180px; /* 确保不会被压缩 */
  background-color: #f0f2f5;
  border-right: 1px solid #e8e8e8;
  overflow-y: auto;
  margin: 0; /* 确保没有额外外边距 */
  padding: 0; /* 确保没有额外内边距 */
}

.sidebar-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}

.sidebar-title {
  font-weight: bold;
}

.sidebar-toggle {
  cursor: pointer;
}

.sidebar-menu {
  padding: 10px 0;
}

.menu-item {
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: rgba(24, 144, 255, 0.1);
}

.menu-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-right: 3px solid #1890ff;
}

.menu-title {
  display: block;
}

/* 右侧内容 - 确保正确占据剩余空间 */
.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f5f5;
  width: calc(100% - 180px); /* 明确计算内容宽度 */
  margin: 0; /* 确保没有额外外边距 */
}

.content-header {
  margin-bottom: 20px;
}

.content-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tab-item {
  padding: 8px 16px;
  background-color: white;
  border-radius: 4px 4px 0 0;
  border: 1px solid #d9d9d9;
  border-bottom: none;
  cursor: pointer;
}

.tab-item.active {
  color: #1890ff;
  border-color: #1890ff;
}

.tab-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #999;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn.primary {
  background-color: #1890ff;
  color: white;
}

.btn.primary:hover {
  background-color: #40a9ff;
}

.btn.danger {
  background-color: #ff4d4f;
  color: white;
}

.btn.danger:hover {
  background-color: #ff7875;
}

/* 表格样式 */
.table-container {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.data-table th {
  background-color: #fafafa;
  font-weight: 600;
}

.completeness-high {
  color: #52c41a;
}

.completeness-low {
  color: #ff4d4f;
}

.operation-buttons {
  display: flex;
  gap: 15px;
}

.btn-text {
  color: #1890ff;
  cursor: pointer;
}

.btn-text.danger {
  color: #ff4d4f;
}

.btn-text:hover {
  text-decoration: underline;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 15px 20px;
  border-radius: 4px;
}

.page-size {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-size select {
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.page-controls {
  display: flex;
  gap: 5px;
}

.btn-page {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  background-color: white;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.btn-page:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.btn-page.active {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}
</style>